Selecciones y join de datos en D3.js

IIC2026 2020-2

Join de datos en D3.js II

Selecciones y join de datos en D3.js

IIC2026 2020-2

seleccion.data


  • Hay datos que no se le asocian elementos ➡️ enter
  • Hay elementos y datos que se asocian entre ellos ➡️ update
  • Hay elementos que no se le asocian datos ➡️ exit



Datos Enter Update Elementos Exit

seleccion.data


  • Hay datos que no se le asocian elementos ➡️ enter
  • Hay elementos y datos que se asocian entre ellos ➡️ update
  • Elementos desaparecen ➡️ exit



Datos Enter Update Elementos Exit

seleccion.data


  • Nuevos datos aparecen ➡️ enter
  • Hay elementos y datos que se asocian entre ellos ➡️ update
  • Elementos desaparecen ➡️ exit



Datos Enter Update Elementos Exit

seleccion.data


  • Nuevos datos aparecen ➡️ enter
  • Datos cambian ➡️ update
  • Elementos desaparecen ➡️ exit



Datos Enter Update Elementos Exit

Método join para flujo usual de data join



            svg
              .selectAll("rect")
              .data(datos)
              .join("rect");
          

            svg
              .selectAll("rect")
              .data(datos)
              .join(
                enter => enter.append("rect"),
                update => update,
                exit => exit.remove()
              );

Join de datos en D3.js II

Selecciones y join de datos en D3.js

IIC2026 2020-2


¡Deja tus preguntas en los comentarios!